<template>
  <div>
    <van-tabs
      v-if="hasHistory"
      v-model="tabActive">
      <van-tab title="表单详请">
        <!--表单-->
        <formrender
          ref="formrender"
          :form-def="formDef"
          :permissions="permissions"
          :data="formData"
          :buttons="buttons"
          :readonly="readonly"
          :def-id="defId"
          :task-id="taskId"
          :bpmn-inst-id="instanceId||proInstId"
          @fr-ext="handleFrExt"
        />
      </van-tab>
      <van-tab title="审批历史">
        <approval-history
          :task-id="taskId"
          :bpmn-inst-id="instanceId||proInstId"
        />
      </van-tab>
      <van-tab v-if="hasFlowDiagram" title="流程图">
        <flow-diagram
          :def-id="defId"
          :task-id="taskId"
          :bpmn-inst-id="instanceId||proInstId"
        />
      </van-tab>
    </van-tabs>
    <div v-else>
      <!--没有意见的表单流程审批、启动或者草稿-->
      <formrender
        ref="formrender"
        :form-def="formDef"
        :permissions="permissions"
        :data="formData"
        :buttons="buttons"
        :readonly="readonly"
        :def-id="defId"
        :task-id="taskId"
        :bpmn-inst-id="instanceId||proInstId"
        @fr-ext="handleFrExt"
      />
    </div>
    <!---流程图-->
    <diagram-popup
      v-model="flowDiagramPopup"
      :def-id="defId"
      :task-id="taskId"
      :bpmn-inst-id="instanceId||proInstId"
    />
    <!---审批历史-->
    <history-popup
      v-model="approvalHistoryPopup"
      :def-id="defId"
      :task-id="taskId"
      :bpmn-inst-id="instanceId||proInstId"
    />
    <stop-popup
      v-model="stopOpinionPopup"
      :task-id="taskId"
      @after-script="afterScript"
    />
    <agree-popup
      v-model="agreeOpinionPopup"
      :task-id="taskId"
      :action-name="actionName"
      :data="submitFormData"
      :version="version"
      @after-script="afterScript"
    />
    <reject-popup
      v-model="rejectOpinionPopup"
      :task-id="taskId"
      :action-name="actionName"
      :data="submitFormData"
      :version="version"
      @after-script="afterScript"
    />
    <delegate-popup
      v-model="delegatePopup"
      :task-id="taskId"
    />
    <add-sign-task-popup
      v-model="addSignTaskPopup"
      :task-id="taskId"
    />

  </div>
</template>
<script>

import Formrender from '@/components/Formrender'
import BpmnButton from './button.js'
import ApprovalHistory from '@/components/Bpmn/approval-history'
import FlowDiagram from '@/components/Bpmn/flow-diagram'
import DiagramPopup from '../form-ext/diagram'
import HistoryPopup from '../form-ext/history'
import StopPopup from '../form-ext/stop'
import AgreePopup from '../form-ext/agree'
import RejectPopup from '../form-ext/reject'
import DelegatePopup from '../form-ext/delegate'
import AddSignTaskPopup from '../form-ext/addSignTask'
import JForm from '@/components/utils/JForm'// 自定义脚本
import Common from '@/components/common.vue'

import { getTaskFormData, getInstFormData, getFormDataForInst } from '@/api/platform/bpmn/bpmn'

export default {
  name: 'FormDetail',
  components: {
    Formrender,
    ApprovalHistory,
    FlowDiagram,
    DiagramPopup,
    HistoryPopup,
    StopPopup,
    AgreePopup,
    RejectPopup,
    DelegatePopup,
    AddSignTaskPopup
  },
  data() {
    return {
      title: '',
      tabActive: 0,
      hasHistory: true,
      // 流程参数
      taskId: '',
      defId: '',
      proInstId: '',
      instanceId: '',
      formDef: {}, // 表单信息
      permissions: {}, // 表单权限
      formData: {}, // 表单数据
      buttons: [], // 操作按钮
      version: 0, // 版本号
      readonly: false, // 是否只读
      approvalHistoryPopup: false,
      flowDiagramPopup: false,
      hasFlowDiagram: false,
      stopOpinionPopup: false,
      agreeOpinionPopup: false,
      rejectOpinionPopup: false,
      delegatePopup: false,
      addSignTaskPopup: false,
      actionName: '',
      actionLabel: '',
      submitFormData: ''
    }
  },
  watch: {

  },
  created() {
    const query = this.$route.query
    this.defId = query.defId // 流程定义
    this.proInstId = query.proInstId // 草稿启动的流程实例id
    this.taskId = query.taskId//  任务ID
    this.instanceId = query.instanceId// 任务实例ID

    this.nodeId = query.nodeId// 任务实例ID

    this.title = this.$route.params.title || ''

    this.loadData()
  },
  mounted() {
    JForm._init(this)
  },
  methods: {
    loadData() {
      if (this.$utils.isNotEmpty(this.taskId)) { // 处理流程任务
        this.getTaskFormData()
      } else if (this.$utils.isNotEmpty(this.proInstId) || this.$utils.isNotEmpty(this.defId)) { // 启动 或者草稿流程
        this.getFormDataForInst()
      } else {
        this.getInstFormData()
      }
    },
    /**
     * 获取流程任务表单
     */
    getTaskFormData() {
      this.hasHistory = false
      getTaskFormData({ taskId: this.taskId }).then(response => {
        this.setFormData(response.data)
		console.log("form表单id:"+JSON.parse(response.data.boData).id)
		console.log("wav路径:"+JSON.parse(response.data.boData).wav)
		Common.wav = JSON.parse(response.data.boData).wav;
		Common.wavFormId = JSON.parse(response.data.boData).id;
      })
    },
    /**
     * 启动 或者草稿流程
     */
    getFormDataForInst() {
      this.hasHistory = false
      getFormDataForInst({ defId: this.defId, proInstId: this.proInstId || '' }).then(response => {
        this.setFormData(response.data)
      })
    },
    /**
     * 查看流程实例
     */
    getInstFormData() {
      this.readonly = true
      this.hasFlowDiagram = true
      getInstFormData({ bpmInstId: this.instanceId }).then(response => {
        this.setFormData(response.data)
      })
    },
    setFormData(data) {
      if (this.$utils.isEmpty(data)) {
        this.$dialog.alert({
          message: `<div class="lc-error-messsage">未获取到数据</div>`
        }).then(() => {
          this.$router.go(-1)
        })
        return
      }
      // 判断是否设置表单
      if (this.$utils.isEmpty(data.formModel)) {
        this.$dialog.alert({
          message: `<div class="lc-error-messsage">未设置表单,请流程定义中设置表单</div>`
        }).then(() => {
          this.$router.go(-1)
        })
        return
      }

      this.title = this.$utils.isEmpty(this.title) ? data.title : this.title

      // 表单定义
      this.formDef = this.$utils.parseData(data.formModel.formData) || {}
      // 表单数据
      this.formData = this.$utils.parseData(data.boData) || {}
      // 表单权限
      this.permissions = this.$utils.parseData(data.permissions) || {}
      // 操作按钮
      this.buttons = this.getButtons(data.buttons, this.getParams(data)) || []
      // 版本号
      this.version = data.version
    },
    getParams(data) {
      var attributes = data.attributes || {}
      return {
        title: this.title,
        defId: this.defId,
        proInstId: this.proInstId,
        taskId: this.taskId,
        nodeId: this.nodeId,
        lockUser: attributes.lockUser,
        curUserId: attributes.curUserId,
        suspendState: attributes.suspendState,
        printTemplateId: data.formModel.templateId,
        version: data.version,
        firstNodeUserAssign: attributes.firstNodeUserAssign
      }
    },
    getButtons(buttons, params) {
      if (this.$utils.isEmpty(buttons)) { return null }
      const btn = new BpmnButton({
        buttons: buttons,
        params: params
      })
      return btn.response_buttons
    },
    handleFrExt(data) {
      const formRenderData = this.$refs.formrender.getFormData()
      if (data === 'flowDiagram') {
        this.flowDiagramPopup = true
      } else if (data === 'approvalHistory') {
        this.approvalHistoryPopup = true
      } else if (data === 'stopProcess') {
        this.stopOpinionPopup = true
      } else if (data === 'agree' || data === 'oppose' || data === 'abandon') {
        this.submitFormData = formRenderData
        this.agreeOpinionPopup = true
        this.actionName = data
      } else if (data === 'rejectToPrevious' || data === 'rejectToStart' || data === 'reject') {
        this.submitFormData = formRenderData
        this.rejectOpinionPopup = true
        this.actionName = data
      } else if (data === 'delegate') {
        this.delegatePopup = true
      } else if (data === 'addSign') {
        this.addSignTaskPopup = true
      }
    },
    afterScript(action) {
      if (!this.$refs.formrender.hasScript) return
      const afterSubmitResult = JForm._afterSubmit(this, action, this.$refs.formrender.getFormData())
      if (typeof (afterSubmitResult) !== 'undefined' && !afterSubmitResult) {
        return
      }
    }
  }
}
</script>
